<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        width: 34.333333%;
        float: right;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
</style>

<template>
    <div class="department">
<!--        <div style="height:50px">-->
<!--            <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>导出excel</a>-->
<!--        </div>-->
        <form class="layui-form " >
            <div  class="layui-col-lg4 select-item" style="text-align: right;width: auto" >

                <div class="layui-inline" style="width: 13%">
                    <input type="text" v-model="starttime" id="starttime" autocomplete="off" placeholder="请选择开始时间" class="layui-input key">

                </div>
                <div class="layui-inline" style="width: 13%">
                    <input type="text" v-model="endtime" id="endtime" autocomplete="off"  placeholder="请选择结束时间" class="layui-input key">

                </div>
                <div class="layui-inline" style="width: 10%">

                    <select   v-model="srguid" name="srguid"  id="srguid"  lay-filter="storeroom"       placeholder="请选择库房"   class="layui-form-select"   >
                        <option value="" >请选择库房</option>
                        <option v-for="item in storeroom" :value="item.guid" >{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 10%">
                    <select      v-model="shrguid"  name="shrguid"  id="shrguid" placeholder="请选择库间"    class="layui-input layui-unselect"    >
                     </select>
                </div>
                <div class="layui-inline" style="width: 10%">
                    <select      v-model="outtype"  name="outtype"  id="outtype" placeholder="请选择出库类型"    class="layui-input layui-unselect"    >
                        <option value="" >请选择出库类型</option>
                        <option v-for="item in whoutformType" :value="item.dictkey" >{{item.dicttext}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 10%">
                    <select      v-model="orgguid"  name="orgguid"  id="orgguid" placeholder="请选择公司"    class="layui-input layui-unselect"    >
                        <option value="" >请选择公司</option>
                        <option v-for="item in organization" :value="item.guid" >{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 10%">
                    <select id="revCustId" name="revCustId" class="layui-form-select" placeholder="请选择客户"  lay-search >
                        <option value="">请选择客户</option>
                        <option v-for="(item, index) in customers" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 10%">
                    <input type="text" id="businessCode" placeholder="输入业务编号" class="layui-input key">
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
                <button type="button" class="layui-btn sou" @click="exportExcel">导出excel</button>
            </div>

        </form>
        <table class="layui-table layui-form"   style="height:200px">

            <thead>
            <tr>
                <th>出库单编号</th>
                <th>订单编号</th>
                <th>出库日期</th>
                <th>出库类型</th>
                <th>库存组织</th>
                <th>库房</th>
                <th>库间</th>
                <th>产品</th>
                <th>规格</th>
                <th>数量</th>
                <th>单位</th>
                <th>结算组织</th>
                <th>客户</th>
                <th>操作人</th>

            </tr>
            </thead>
            <tbody>
            <template v-for="(item) in afterList" >
                <tr class="id9"  v-for="(row, i) in item" >
                    <td v-if="i === 0" :rowspan="item.length">{{row.whoutcode}} </td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.businessCode}} </td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.outtime}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.outtypename}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.orgname}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.storeroom}}</td>
                    <td>{{row.house}}</td>
                    <td>{{row.product}}</td>
                    <td>{{row.spename}}</td>
                    <td>{{row.weight}}</td>
                    <td>{{row.stockunit}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.settlOrgName}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.revCustName}}</td>
                    <td>{{row.operator}}</td>
                </tr>
            </template>
            <tr v-if="whoutform.length != 0" >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td> 合计：{{totalWeight}}</td>
                <td></td>
            </tr>

            </tbody>
        </table>
        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    export default {
        name: 'Exporywhoutform',
        components: {Pagination},
        data () {
            return {
                departments: [],
                currentPage: 1,
                rows: 10,
                totalPage: 0,
                searchName: '',
                afterList: [],
                storehouseroom:[],
                storeroom:[],
                starttime:"",
                endtime:"",
                srguid:"",
                shrguid:"",
                whoutform:[],
                exportpage:1,
                total: 1000,
                salespermissionsData:[],
                whoutformType:[],
                outtype:"",
                totalWeight: 0,
                revCustId: '',
                businessCode: '',
                customers: [],
                organization:[],
                orgguid:"",
            }
        },
        mounted() {
            let that = this;
            this.getBaseInfo();
            this.getRooms()

            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                that.getCustomer();

             form.on('select(storeroom)', function(data){
                 $("#shrguid").empty();
                 $('#shrguid').append(new Option('请选择库间', ""));// 下拉菜单里添加元素。
                    $.each(that.storehouseroom, function (index, item) {
                        if(item.storeguid == data.value){
                            $('#shrguid').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                            layui.form.render("select");
                        }
                    });
             })
            });
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#starttime' //指定元素
                });
                //执行一个laydate实例
                laydate.render({
                    elem: '#endtime' //指定元素
                });
            });
        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();

        },
        methods: {
            getCustomer: function() {
                let departid = $('#currentDepart').val();
                this.axios({
                    method: 'get',
                    responseType: 'json',
                    url: '/sales/Customer!getCustomers.action',
                    params: {departid: departid, functiontype: 13}
                }).then(response => {
                    if (response.data.msg == "success") {
                        this.customers = response.data.customers;
                    } else {
                        this.toastText('获取客户数据失败');
                    }
                });
            },
            // 数据转换
            tansList () {
                this.afterList = Object.values(this.whoutform.reduce((temp, item) => {
                    if( temp[item.whoutcode] ) {
                        temp[item.whoutcode].push(item)
                    }else {
                        temp[item.whoutcode]  = [item]
                    }
                    return temp
                },{}))
            },
            search: function() {
                this.getPageData('search');
                console.log(this);
            },
            turnPage: function(data){
                this.exportpage = data
                this.currentPage = data;
                this.getPageData();
            },
            countRowspan:function (data){
                var count = 0;
                $.each( this.whoutform, function( key, item ) {
                        $.each( item.items, function( key, subitem ) {
                            if(data.guid == subitem.whoutid && data.guid == item.guid){
                                count = count + 1;
                            }
                        } );
                } );
                return count;
            },
            getPageData: function(type = '') {
                var that = this;

                let loader = layui.layer.load();

                let postData = {rows: that.rows};
                if (type != 'search') {
                    postData.page = that.currentPage;
                }
                that.starttime = $('#starttime').val();
                that.endtime = $('#endtime').val();
                that.srguid =  $('#srguid').val();
                that.shrguid =  $('#shrguid').val();
                that.outtype =  $('#outtype').val();
                that.revCustId = $('#revCustId').val();
                that.businessCode = $('#businessCode').val();
                that.orgguid =  $('#orgguid').val();


                postData.starttime = that.starttime;
                postData.endtime = that.endtime;
                postData.shrguid = that.shrguid;
                postData.srguid = that.srguid;
                postData.outtype = that.outtype;
                postData.srguids = [];
                postData.type = 1;
                postData.revCustId = that.revCustId;
                postData.businessCode = that.businessCode;
                postData.orgguid = that.orgguid;


                var srguids = [];
                if(postData.srguid == ""){
                    $.each(that.storeroom, function (index, itemroom) {
                        srguids.push(itemroom.guid)
                    });
                    postData.srguidStr = srguids.toString();
                    if(postData.srguidStr == ''){
                        that.toast("无授权库房！");
                        layer.close(loader);
                        return false;

                    }
                }

                $.ajax({
                    url: '/sales/Whoutform!findDetailPC.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.info != undefined && res.info.rows != undefined) {
                            //分页数据赋值
                            that.currentPage = res.info.indexPage;
                            that.totalPage = res.info.pageCount;
                            that.total = res.info.total;
                            that.whoutform = res.info.rows;
                            that.totalWeight = res.sum;
                            that.tansList()

                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            },getBaseInfo: function(type = '') {
                var that = this;
                $.ajax({
                    url: '/sales/Whoutform!getBaseInfo.action?openid=' + localStorage.openid,
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        if (res.msg == 'success') {
                            let data =res;
                            that.storehouseroom = data.storehouseroom;
                            that.whoutformType = data.whoutformType;
                            that.organization = data.organization;
                        } else {
                            $.toast("系统错误", 'forbidden');
                        }
                    },
                    complete: function () {
                        layer.close();
                    }
                });
            },

            getRooms: function() {
                let postData = {functionTypes: 10, type: 1};
                let that = this;
                $.ajax({
                    url: '/sales/Salespermission!getPermisForStore.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.msg == 'true') {
                            that.storeroom = res.storeroom;
                        } else {
                            that.toast('获取库房数据失败！');
                        }
                    }
                });

            },

            compare: function (property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            add: function () {
                this.$parent.switchPage('addSalesPermission');
            },
            exportExcel:function (){
                var that = this;
                let postData = {rows: that.rows};
                that.starttime = $('#starttime').val();
                that.endtime = $('#endtime').val();
                that.srguid =  $('#srguid').val();
                that.shrguid =  $('#shrguid').val();
                that.outtype =  $('#outtype').val();
                if(that.shrguid == null){
                    that.shrguid ="";
                }
                var srguids = [];
                if(that.srguid  == ""){
                    $.each(that.storeroom, function (index, itemroom) {
                        srguids.push(itemroom.guid)
                    });
                    if(srguids.toString() == ''){
                        that.toast("无授权库房！");
                        return false;
                    }
                }

                window.location.href="/sales/Whoutform!exportOrderData.action?starttime=" + that.starttime + "&endtime=" + that.endtime + "&srguid=" + that.srguid +"&shrguid="+ that.shrguid+ "&rows=" + that.total +  "&page=1&srguidStr=" + srguids.toString() +"&outtype=" + that.outtype + "&revCustId=" + that.revCustId + "&businessCode=" + that.businessCode + "&orgguid=" + that.orgguid
            },
            edit: function (id) {
                this.$parent.gid = id;
                this.$parent.switchPage('EditDepartment');
            },
            del: function (id) {
                let that = this;
                layer.confirm('确定要删除该数据吗？', function () {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Salespermission!del.action',
                        type: "post",
                        data: {guid: id},
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toast("删除成功");
                                that.getPageData('search');
                            } else {
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                })
            }
        }
    }
</script>
